<template>
	<view>
		<view class="ditu">
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map style="width: 100%; height: 800rpx;" :latitude="latitude" :longitude="longitude"
						:markers="covers">
					</map>
				</view>
			</view>
		</view>
		<view class="jd">
			<view class="xs">
				接单车辆
			</view>
			<view class="chep">
				<view class="pai">
					<!-- 选中之后的数据展示 -->
					<view class="inputPlaceholder" v-if='value'>
						<text style="color:black;">{{ value }}</text>
						<view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
						<view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
					</view>
					<!-- 未选择时的Placeholder展示 -->
					<view class="inputPlaceholder" v-else @tap="changejiantou">
						<text>请选择司机类别</text>
						<view class="jiantou1" v-if='isjiantou'><i class="iconfont icon-jiantou"></i></view>
						<view class="jiantou1" v-else><i class="iconfont icon-jiantou1"></i></view>
					</view>
					<!-- 下拉展开后的可选择内容 -->
					<view class="content" v-if='!isjiantou'>
						<view :class="item.cid === item.cid ? 'active' : ''" v-for="item in selectcontent"
							:key="item.cid" @tap="changecontent" :data-datavalue="item">
							<view :class="item.cid === valueid ? 'active' : ''" v-for="item in selectcontent"
								:key="item.cid" @tap="changecontent" :data-datavalue="item">
								{{ item.carnumber }}
							</view>
						</view>
					</view>

				</view>
				<view class="gh" @tap="changejiantou">
					更换车辆
				</view>
			</view>
			<view class="wz">
				<view class="jdwz">
					<view class="dangqian">
						当前位置:
					</view><view style="color: #3282E7;overflow: hidden;">{{ jAdd }}</view>
				</view>
				<view class="jdwz">
					<view class="dangqian1">
						货物位置:
					</view>
					<view style="overflow: hidden;">{{ sAdd }}</view>
				</view>
			</view>
			<button class="button" @click="qrqd()" style="margin-top: 100rpx;">确认抢单</button>
			<view class="chengg" v-if="xsxs">
				<view class="zizizi">
					恭喜您，抢单成功！
				</view>
				<button class="haode" @click="dd()">
					<view v-for="task in tasks" :key="task.id">
						好的 ({{ task.remainingTime }}s)
					</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	//存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';

	//存放用户信息的容器
	import {
		goodsStore
	} from '@/stores/goods.js';
	import {
		shopStore
	} from '@/stores/shop.js';
	//引入容器
	const u = userStore()
	import {
		onLoad
	} from '@dcloudio/uni-app';
	//引入拦截器
	import '@/config/requst.js'
	import {
		ref
	} from 'vue';
	import {
		http
	} from '@/config/requst.js';
	import {
		reactive,
		onUnmounted
	} from 'vue';

	const id = ref(0);
	const xsxs = ref(false);
	const latitude = ref();
	const longitude = ref();
	const jAdd = ref();
	const tasks = reactive([{
		id: 1,
		remainingTime: 3
	}, ]);
	let intervalId;
	const shop = ref({}) //存放商品信息
	const h_latitude = ref()
	const h_longitude = ref()
	const sAdd = ref()
	onUnmounted(() => {
		clearInterval(intervalId);
	});
	const covers = (ref([{
			latitude: latitude.value,
			longitude: longitude.value,
			iconPath: '/static/dingwei4.png'
		},
		{
			latitude: h_latitude.value,
			longitude: h_longitude.value,
			iconPath: '../../../static/location.png'
		}
	]));

	const haod1e = () => {
		uni.getLocation({
			type: 'wgs84', // 返回的坐标类型，wgs84 表示国际标准的经纬度
			success: function(res) {
				latitude.value = res.latitude;
				longitude.value = res.longitude;
				console.log(22222)
				console.log(latitude.value)
				console.log(longitude.value)
				covers.value[0].latitude = latitude.value
				covers.value[0].longitude = longitude.value
				hq()
			}
		});
	}
	//向后端发送请求获取当前司机的地址
	const hq = async () => {
		const res = await http({
			url: '/map/reverse/' + latitude.value + '/' + longitude.value
		})
		jAdd.value = res.shuju
	}
	const qrqd = () => {
		zd()
	}
	//抢单流程
	const zd = async () => {
		console.log(value.value)
		if (value.value == "请选择车辆") {
			uni.showToast({
				title: '请选择车辆',
				duration: 2000,
				icon: 'error'
			});
			return
		}
		let aa = {
			h_latitude: h_latitude.value,
			h_longitude: h_longitude.value,
			latitude: latitude.value,
			longitude: longitude.value,
		}

		const res = await http({
			url: '/map/getwd',
			method: 'POST',
			data: aa
		})
		//判断该用户的距离是否满足条件
		if (res.shuju < 10) {
			console.log(res)
			//查询这个人是否有正在进行的订单
			let id = userStore().user.id
			const r = await http({
				url: '/orders/select/' + id,
				method: 'get'
			})
			if (r.code == 20040) {
				console.log(12321)
				//创建订单
				dd()
			} else {
				uni.showToast({
					title: '您有正在进行的订单',
				});
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/Search/Search'
					});
				}, 2000);
			}
		} else {
			uni.showToast({
				title: '您的位置不符合接单区域',
				duration: 2000,
				icon: 'error'
			});
		}
	}
	//创建订单
	const dd = async () => {
		let or = {
			did: userStore().user.id,
			cid: valueid.value,
			sourceid: shop.value.sourceid
		}
		const res = await http({
			url: '/orders/add',
			method: 'POST',
			data: or
		})
		//判断是否抢单成功
		if (res.code == 60001) {
			goodsStore().setGoods(shop.value)

			xsxs.value = 'true';
			let i;
			intervalId = setInterval(() => {
				tasks.forEach(task => {
					i = task.remainingTime
					if (task.remainingTime > 0) {
						task.remainingTime -= 1;
					} else if (task.remainingTime == 0) {
						tzhuan()
					}
				});
			}, 1000);
		} else {
			uni.showToast({
				title: res.msg
			});
		}
	}
	const tzhuan = () => {
		uni.switchTab({
			url: '/pages/Search/Search'
		});
	}
	//下拉列表的js
	const isjiantou = ref(true);
	const selectcontent = ref([]);
	//查询车辆信息
	const car = async () => {
		let id = userStore().user.id
		const res = await http({
			url: '/car/select/' + id
		})
		selectcontent.value = res.shuju
	}
	const value = ref("请选择车辆");
	const valueid = ref(1);

	// 下拉框收起和下拉
	const changejiantou = () => {
		isjiantou.value = !isjiantou.value;
	};

	const changecontent = (e) => {
		const datavalue = e.currentTarget.dataset.datavalue;
		value.value = datavalue.carnumber;
		valueid.value = datavalue.cid;
		isjiantou.value = true;
	};
	//查询商品的位置信息
	const sp = async (obj) => {
		const res = await http({
			url: '/map/getad',
			method: 'POST',
			data: obj
		})
		sAdd.value = res.shuju
	}
	onLoad(() => {
		haod1e()
		shop.value = shopStore().shop
		console.log(shop.value)
		let mm = shop.value.shippingaddress.stationLocation.split(",")
		h_latitude.value = mm[1]
		covers.value[1].latitude = mm[1]
		h_longitude.value = mm[0]
		covers.value[1].longitude = mm[0]
		console.log(covers.value[1].latitude)
		console.log(covers.value[1].longitude)
		let cc = {
			h_latitude: h_latitude.value,
			h_longitude: h_longitude.value
		}
		sp(cc)
		car()
	})
</script>

<style scoped>
	.ditu {
		height: 800rpx;
		/* border: 1px solid #000; */
		margin-bottom: 30rpx;
	}

	.xs {
		font-size: 36rpx;
		height: 60rpx;
		line-height: 60rpx;
		/* border: 1px solid #000; */
		padding-left: 20rpx;
		color: #B6B6B6;
	}

	.chep {
		display: flex;
		font-size: 36rpx;
		height: 60rpx;
		line-height: 60rpx;
		/* border: 1px solid #000; */
		padding-left: 20rpx;
		justify-content: space-between;
	}

	.gh {
		color: #002F93;
		padding-right: 30rpx;
	}

	.wz {
		margin-top: 20rpx;
	}

	.jdwz {
		display: flex;
		height: 120rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
	}
	.dangqian{
		/* border: 1px solid #000; */
		width: 150rpx;
	}

	.xxdz {
		display: flex;
		height: 120rpx;
		line-height: 60rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
	}
	.dangqian1{
		/* border: 1px solid #000; */
		width: 190rpx;
	}
	.button {
		margin-top: 30rpx;
		background-color: #0000CD;
		color: #FFF8F6;
		border-radius: 50rpx;
		width: 700rpx;
	}

	.chengg {
		/* border: 1px solid #000; */
		position: fixed;
		/* position: absolute; */
		bottom: 760rpx;
		left: 120rpx;
		width: 500rpx;
		height: 380rpx;
		background-color: #FFF8F6;
		border-radius: 10rpx;
	}

	.zizizi {
		/* border: 1px solid #555; */
		height: 260rpx;
		text-align: center;
		line-height: 260rpx;
	}

	.haode {

		font-size: 32rpx;
		width: 260rpx;
		border-radius: 50rpx;
		background-color: #002F93;
		color: #FFF8F6;

	}

	/* 下拉列表 */
	.pai {

		/* background-image: url('/photo/zhaohuo/xiala.png');
  background-repeat: no-repeat;
  background-position: 120rpx 25rpx; */
		position: relative;
	}

	.jiantou1 {
		position: absolute;
		right: 10rpx;
		top: 8rpx;
	}

	.content {
		/* border: 1px solid #000; */
		width: 300rpx;
		max-height: 400rpx;
		position: absolute;
		/*
  top: 120rpx;
  left: 389rpx; */
		background: #FFFFFF;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 10px 1px rgba(209, 209, 209, 0.35);
		padding: 20rpx;
		overflow-x: hidden;
		overflow-y: scroll;
		z-index: 1000;
	}
</style>